<template>
  <view class="detail">
    <view class="detail-wrap flex-column">
      <wd-notice-bar
        :scrollable="false"
        text="红色字体的为作者回复~"
        prefix="user"
        type="danger"
      />
      <view class="content-list">
        <view class="content-item" key="suggestion">
          <view class="suggestion-item common-item flex">
            <view class="avatar-wrap">
              <img :src="suggestionItem.url" />
            </view>
            <view class="content-wrap ml-32">
              <view class="name-time flex">
                <view class="name" @click="showName(suggestionItem.name)">{{
                  suggestionItem.name
                }}</view>
                <view class="time ml-16">{{ suggestionItem.create_time }}</view>
              </view>
              <view class="text-wrap p-32 mt-16">
                <span>{{ suggestionItem.content }}</span>
              </view>
            </view>
          </view>
        </view>
        <view
          class="content-item"
          v-for="item of contentList"
          :key="item.content_id"
        >
          <template v-if="item.is_self === 1">
            <view class="suggestion-item common-item flex">
              <view class="avatar-wrap">
                <img :src="item.url" />
              </view>
              <view class="content-wrap ml-32">
                <view class="name-time flex">
                  <view class="name" @click="showName(item.name)">{{
                    item.name
                  }}</view>
                  <view class="time ml-16">{{ item.create_time }}</view>
                </view>
                <view class="text-wrap p-32 mt-16">
                  <span>{{ item.content }}</span>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="reply-item common-item flex">
              <view class="content-wrap flex-column">
                <view
                  class="name-time flex"
                  :style="{ color: item.is_author === 1 ? '#f22' : '' }"
                >
                  <view class="name" @click="showName(item.name)">{{
                    item.name
                  }}</view>
                  <view class="time ml-16">{{ item.create_time }}</view>
                </view>
                <view class="text-wrap p-32 mt-16">
                  <span>{{ item.content }}</span>
                </view>
              </view>
              <view class="avatar-wrap ml-32">
                <img :src="item.url" />
              </view>
            </view>
          </template>
        </view>
      </view>

      <view class="input-wrap">
        <view class="wrapper flex-column">
          <wd-textarea type="text" v-model="replyValue"></wd-textarea>
          <button class="button" @click="answer">回复</button>
        </view>
      </view>
    </view>
    <!-- 完整昵称 -->
    <wd-message-box></wd-message-box>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useMessage } from "@/node_modules/wot-design-uni";
import { onLoad } from "@dcloudio/uni-app";

import {
  getSuggestionList,
  getReplyList,
  replySuggestion,
} from "../../../api/suggestion";
import { getUserInfo } from "../../../api/wechat";
import { formatTime, toast } from "../../../utils/common";

const message = useMessage();

let id = ref(null);
onLoad((params) => {
  if (params.id) {
    id.value = params.id;
    getSuggestionList({
      id: params.id,
    }).then((res) => {
      if (res.code === 0) {
        res.data[0].create_time = formatTime(res.data[0].create_time);
        suggestionItem.value = res.data[0];
      }
      getList();
    });
  }
});

function getList() {
  getReplyList({
    suggestionId: id.value,
  }).then((res) => {
    if (res.code === 0) {
      res.data.forEach(
        (item) => (item.create_time = formatTime(item.create_time))
      );
      contentList.value = res.data;
    }
  });
}

let suggestionItem = ref({});
const contentList = ref([]);

const showName = (name) => {
  message.alert(name);
};

const replyValue = ref(null);
function answer() {
  if (!replyValue.value) {
    toast({
      icon: "error",
      title: "您好像什么都没有说哦~",
    });
    return;
  }
  getUserInfo({
    openId: uni.getStorageSync("openId"),
  }).then((res) => {
    if (res.code === 0) {
      replySuggestion({
        content: replyValue.value,
        suggestionId: id.value,
        open_id: uni.getStorageSync("openId"),
        name: res.data.nickname,
        url: res.data.avatar_url,
      }).then((res1) => {
        if (res1.code === 0) {
          replyValue.value = "";
          getList();
        }
      });
    }
  });
}
</script>

<style scoped lang="scss">
.detail {
  height: 100%;
  overflow: hidden;
  letter-spacing: 0.5px;
  background-color: #e4e4e1;
  background-image: radial-gradient(
      at top center,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.03) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(143, 152, 157, 0.6) 100%
    );
  background-blend-mode: normal, multiply;

  &-wrap {
    height: 100%;
    padding-bottom: 32rpx;
    box-sizing: border-box;

    :deep(.wd-notice-bar) {
      background-color: #fff;
    }

    .content-list {
      flex: 1;
      overflow-y: scroll;
      padding: 0 3%;

      .common-item {
        margin-top: 64rpx;

        image {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
        }

        .content-wrap {
          width: calc(100% - 120rpx);

          .text-wrap {
            width: max-content;
            max-width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            color: #333;
            border-radius: 0 8px 8px 8px;
          }

          .name-time {
            width: 100%;
            color: #fff;
            font-size: 28rpx;

            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .time {
              white-space: nowrap;
            }
          }
        }
      }

      .reply-item {
        .content-wrap {
          align-items: flex-end;

          .name-time {
            justify-content: flex-end;
          }

          .text-wrap {
            border-radius: 8px 0 8px 8px;
          }
        }
      }
    }

    .input-wrap {
      width: 100%;
      padding: 0 3%;
      box-sizing: border-box;
      margin-top: 32rpx;

      .wrapper {
        width: 100%;
        border-top-right-radius: 8px;
        background-color: #fff;
        position: relative;
        padding-bottom: 96rpx;
        box-sizing: border-box;

        .button {
          position: absolute;
          bottom: 32rpx;
          right: 32rpx;
          white-space: nowrap;
          width: 144rpx;
          height: 64rpx;
          line-height: 64rpx;
          align-self: flex-end;
          outline: none;
          border: 1px solid #fff;
          background-color: #4d80f0;
          color: #fff;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
